{% extends 'index.html' %}
{% block ace-content %}
<link href="/static/dist/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/static/dist/js/fileinput.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/dist/js/bootstrap-notify.js"></script>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-wrench"></i><code>Ansible Playbook</code>配置中心</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
 						<i class="fa  fa-plus"></i> 添加剧本
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-6">
                                <legend><i class="fa  fa-paper-plane"></i>Ansible服务器</legend>
                                    <form  method="post" enctype="multipart/form-data">  {% csrf_token %}
                                        <div class="form-group">
                                            <label>剧本名称</label>
                                            <input class="form-control" name="playbook_name" required>
                                            <p class="help-block">例如：系统初始化</p>
                                        </div>
                                        <div class="form-group">
                                            <label>剧本文件</label>
                                            <input type="file" id="playbook_file" class="file" name="playbook_file" required>
                                        </div>                                         
                                        <div class="form-group">
                                            <label>描述<i class="fa fa-info-circle" data-toggle="tooltip"  title="功能描述"></i></label>
                                            <textarea class="form-control" rows="3" name="playbook_desc"></textarea>
                                            <p class="help-block">例如：用于初始化系统内核参数，关闭不必要的服务</p>
                                        </div>                                              
                                        <button type="reset" class="btn btn-default">撤销</button>
                                        <button type="submit" class="btn btn-default">添加</button>
                                    
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                                <div class="col-lg-6">
                                    <legend><i class="fa  fa-paper-plane-o"></i>目标服务器<i class="fa fa-info-circle" data-toggle="tooltip"  title="如果不配置，则所有人都能使用"></i></legend>
										<div class="form-group" >			 		             
											<label>动态主机<i class="fa fa-info-circle" data-toggle="tooltip"  title="根据不同场景选择服务器"></i></label>	
											<select class="form-control" name="server_model" id="server_model" onchange="javascript:oBtAnsibleServerl();" required>
												<option name="server_model" value="" selected="selected">请选择一个类型</option>
												<option value="service" name="server_model">产品线</option>
												<option value="inventory" name="server_model">动态主机组</option>
												<option value="group" name="server_model">使用部门</option>
												<option value="custom" name="server_model">自定义</option> 	
											</select>		
										</div>
 
										<div id='project_server'  style="display:none;">
											<div class="form-group">
												 <label>所属产品线</label>
		                                            <select class="form-control" name="ansible_project"  id="ansible_project" onchange="javascript:oBtProjectSelect();">
		                                            	<option name="project" value="" selected="selected">请选择一个产品线</option>
		                                            	{% for ds in projectList %}
		                                            		<option name="project" value="{{ds.id}}">{{ds.project_name}}</option>
		                                            	{% endfor %}
		                                            </select>
											</div>										
											<div class="form-group">
												 <label>业务类型</label>
		                                         <select class="form-control" name="ansible_service"  id="ansible_service">
		                                            	<option name="service" value="">选择一个业务类型</option>
		                                         </select>
											</div>	
										</div>	 
                                        
                                         <div id="inventory_server" class="form-group" style="display:none;">
                                            <label>动态主机组<i class="fa fa-info-circle" data-toggle="tooltip"  title="根据动态资产添加选择服务器"></i></label>
		                                       <select class="form-control" name="ansible_inventory" id="ansible_inventory" onchange="javascript:oBtInventorySelect(this);">
		                                       		<option name="ansible_inventory" value="">选择一个业务类型</option>
		                                           	{% for ds in inventoryList %}
		                                            	<option name="ansible_inventory" value="{{ds.id}}">{{ds.name}}</option>
		                                           {% endfor %}
		                                      </select>
                                        </div>                                         
                                        
                                         <div id="group_server" class="form-group" style="display:none;">
                                            <label>服务器使用组<i class="fa fa-info-circle" data-toggle="tooltip"  title="根据服务器分配的用户组选择服务器"></i></label>
		                                       <select class="form-control" name="ansible_group">
		                                       		<option name="group" value="">选择一个用户组</option>
		                                           	{% for ds in groupList %}
		                                            	<option name="group" value="{{ds.id}}">{{ds.name}}</option>
		                                           {% endfor %}
		                                      </select>
                                        </div>                                         
                                        
                                         <div id="custom_server" class="form-group" style="display:none;">
                                            <label>勾选目标服务器<i class="fa fa-info-circle" data-toggle="tooltip"  title="自定选择服务器"></i></label>
                                            <select multiple  name="playbook_server" class="form-control" id="ansible_server">
                                            	{% for ds in serverList %}
                                            		<option name="playbook_server"  value="{{ds.id}}">{{ds.ip}} | {{ds.project}} | {{ds.service}}</option>
                                            	{% endfor %}
                                            </select>
                                        </div>                                          
                                        
                                        <div class="form-group">
                                            <label>用户组<i class="fa fa-info-circle" data-toggle="tooltip"  title="授权给那些用户组能够使用"></i></label>
                                            <select class="form-control" name="playbook_auth_group">
                                            	<option name="playbook_auth_group" value="0">选择用户组</option>
                                            	{% for ds in groupList %}
                                            		<option name="playbook_auth_group" value="{{ds.id}}">{{ds.name}}</option>
                                            	{% endfor %}
                                            </select>
                                        </div>                                                                              
                                        <div class="form-group">
                                            <label>用户<i class="fa fa-info-circle" data-toggle="tooltip"  title="授权给那些用户能够使用"></i></label>
                                            <select class="form-control" name="playbook_auth_user">
                                            	<option name="playbook_auth_user" value="0">选择用户</option>
                                            	{% for ds in userList %}
                                            		<option name="playbook_auth_user" value="{{ds.id}}">{{ds.username}}</option>
                                            	{% endfor %}
                                            </select>
                                        </div>  
                                        <div class="form-group">
                                            <label>剧本外部变量<i class="fa fa-info-circle" data-toggle="tooltip"  title="值为json格式"></i></label>
                                            <textarea class="form-control" rows="3" name="playbook_vars"></textarea>
                                            <p class="help-block">
												例如：{"user":"root"}
                                            </p>
                                        </div>                                        
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                               </form> 
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
</div>

<script type="text/javascript">
{% if errorInfo %}
	window.wxc.xcConfirm("{{errorInfo}}", window.wxc.xcConfirm.typeEnum.error);
{% endif %}
$(function () { $("[data-toggle='tooltip']").tooltip(); });

function oBtInventorySelect(obj){
	   var obj = document.getElementById("ansible_inventory"); 
	   var index = obj.selectedIndex;
	   var sId = obj.options[index].value; 
	   if ( sId  > 0){	 
			$.ajax({
				dataType: "JSON",
				url: "/api/inventory/" + sId +"/", //请求地址
				type:"GET",  //提交类似
				success:function(response){
					if ( JSON.stringify(response["data"]) != '{}'){
						$.notify({
							title: "<strong>发现资产:</strong>",
							message:  "<pre>" + JSON.stringify(response["data"],null,4) + "</pre>",
						},
						{
							type: 'success',
							timer: 3000,
							delay: 30000
						});	
					}
					else {
						$.notify({
							title: "<strong>Ops：</strong>",
							message: "该条件下未发现资产~"
						},
						{
							type: 'danger'
						});
					}
				
						
				},
			});	
	   }
}


$("#playbook_file").fileinput({
	language : 'zh',
	showUpload : false, 
	uploadUrl: '#', // you must set a valid URL here else you will get an error 
	allowedFileExtensions : [".yml",".yaml"], 
	previewFileType:"pdf",
	allowedFileTypes: ["text"],
    overwriteInitial: false,
    maxFileSize: 2000,
    maxFilesNum: 10,
    dropZoneEnabled: false,
    slugCallback: function(filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
}); 

function oBtAnsibleServerl(){
	   var obj = document.getElementById("server_model"); 
	   var index = obj.selectedIndex;
	   var value = obj.options[index].value; 
	   if (value=="group"){
		   document.getElementById("group_server").style.display = "";
		   document.getElementById("custom_server").style.display = "none";
		   document.getElementById("project_server").style.display = "none";
		   document.getElementById("inventory_server").style.display = "none";
	   }
	   else if (value=="custom"){
		   document.getElementById("group_server").style.display = "none";
		   document.getElementById("custom_server").style.display = "";
		   document.getElementById("project_server").style.display = "none";
		   document.getElementById("inventory_server").style.display = "none";
	   }
	   else if (value=="service"){
		   document.getElementById("group_server").style.display = "none";
		   document.getElementById("custom_server").style.display = "none";
		   document.getElementById("project_server").style.display = "";
		   document.getElementById("inventory_server").style.display = "none";
	   }	
	   else if (value=="inventory"){
		   document.getElementById("group_server").style.display = "none";
		   document.getElementById("custom_server").style.display = "none";
		   document.getElementById("project_server").style.display = "none";
		   document.getElementById("inventory_server").style.display = "";
	   }		   
	   else {
		   document.getElementById("group_server").style.display = "none";
		   document.getElementById("custom_server").style.display = "none"; 
		   document.getElementById("project_server").style.display = "none";
		   document.getElementById("inventory_server").style.display = "none";
	   }	
}

function oBtProjectSelect(){
	   $('#ansible_service').removeAttr("disabled");
	   var obj = document.getElementById("ansible_project"); 
	   var index = obj.selectedIndex;
	   var projectId = obj.options[index].value; 
	   if ( projectId > 0){	 
			$.ajax({
				dataType: "JSON",
				url:'/api/project/'+ projectId + '/', //请求地址
				type:"GET",  //提交类似
				success:function(response){
					var binlogHtml = '<select class="form-control" name="ansible_service" id="ansible_service" onchange="javascript:oBtServiceSelect();" required><option selected="selected" name="ansible_service" value="">请选择业务类型</option>'
					var selectHtml = '';
					for (var i=0; i <response["service_assets"].length; i++){
						 selectHtml += '<option name="ansible_service" value="'+ response["service_assets"][i]["id"] +'">' + response["service_assets"][i]["service_name"] + '</option>' 
					};                        
					binlogHtml =  binlogHtml + selectHtml + '</select>';
					document.getElementById("ansible_service").innerHTML= binlogHtml;	
						
				},
			});	
	   }
	   else{
		   $('#ansible_service').attr("disabled",true);
	   }

}

</script>

{% endblock %}